<template>
  <div class="wrap">
    <div class="item" :key="item.id" v-for="(item, index) in fieldList" draggable="true">
      {{item.text}}
    </div>
  </div>
</template>

<script>
export default {
  name: "DragSort",
  data() {
    return {
      fieldList: [
        {id: '10001', text: '姓名'},
        {id: '10002', text: '学号'},
        {id: '10003', text: '班级'},
        {id: '10004', text: '住址'},
        {id: '10005', text: '成绩'}
      ]
    }
  }
}
</script>

<style scoped>
  .wrap {
    width: 600px;
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
  }

  .item {
    width: 80px;
    height: 30px;
    background-color: #00e3ff;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }


</style>